<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="./css/1.css">
  <title>公司官网</title>
  <style></style>
</head>

<body>
  <!-- 第一部分抬头 -->
  <div class="tedu">
    <div class="center">
      <div>
        <img src="./img/1-1FQ9150H0494.png" alt="">
        <div id="menu">
          <ul class="ul-tedu">
            <li><a href="#" class="li-tedu">网站首页</a></li>
            <li><a href="#" class="li-tedu">关于我们</a></li>
            <li><a href="#" class="li-tedu">产品中心</a>
              <div class="dropdown_1column">
                <ul>
                  <li><a href="#">第一系列</a></li>
                  <li><a href="#">第二系列</a></li>
                  <li><a href="#">第三系列</a></li>
                  <li><a href="#">第四系列</a></li>
                  <li><a href="#">第五系列</a></li>
                </ul>
              </div>
            </li>
            <li><a href="#" class="li-tedu">新闻资讯</a>
              <div class="dropdown_1column">
                <ul>
                  <li><a href="#">公司动态</a></li>
                  <li><a href="#">行业新闻</a></li>
                </ul>
              </div>
            </li>
            <li><a href="#" class="li-tedu">案例展示</a>
              <div class="dropdown_1column">
                <ul>
                  <li><a href="#">分类一</a></li>
                  <li><a href="#">分类二</a></li>
                </ul>
              </div>
            </li>
            <li><a href="#" class="li-tedu">联系我们</a></li>
            <li><a href="#" class="li-tedu">人才招聘</a></li>
          </ul>
        </div>
      </div>
    </div>
  </div>
  <!-- 第二部分长图 -->
  <div class="container">
    <div class="carousel">
      <div class="">
        <img src="./img/1-1Q10Z95241A2.png" alt="">
      </div>
    </div>
  </div>
  <!-- 第三部分产品中心 -->
  <div class="cpzx center">
    <div class="san">
      <h2>产品中心</h2>
      <h3>PRODUCT</h3>
      <!-- 控制区 -->
      <div class="d">
        <ul>
          <li data-id="d1" class="cur">第一系列</li>
          <li data-id="d2">第二系列</li>
          <li data-id="d3">第三系列</li>
          <li data-id="d4">第四系列</li>
          <li data-id="d5">第五系列</li>
        </ul>
      </div>
      <!-- 展示区 -->
      <div class="dox">
        <ul id="d1" class="show">
          <li>
            <img src="./img/1-1Q1091423570-L.jpg" alt="">
            <p>产品名称一</p>
          </li>
          <li>
            <img src="./img/1-1Q1091424360-L.jpg" alt="">
            <p>产品名称二</p>
          </li>
          <li>
            <img src="./img/1-1Q1091425310-L.jpg" alt="">
            <p>产品名称三</p>
          </li>
          <li>
            <img src="./img/1-1Q109111AO26.jpg" alt="">
            <p>产品名称四</p>
          </li>
          <li>
            <img src="./img/1-1Q109112045A2.jpg" alt="">
            <p>产品名称五</p>
          </li>
          <li>
            <img src="./img/1-1Q109111IWL.jpg" alt="">
            <p>产品名称六</p>
          </li>
        </ul>
        <ul id="d2">
          <li>
            <img src="./img/1-1Q1091423570-L.jpg" alt="">
            <p>产品名称二</p>
          </li>
          <li>
            <img src="./img/1-1Q1091424360-L.jpg" alt="">
            <p>产品名称二</p>
          </li>
          <li>
            <img src="./img/1-1Q1091425310-L.jpg" alt="">
            <p>产品名称三</p>
          </li>
          <li>
            <img src="./img/1-1Q109111AO26.jpg" alt="">
            <p>产品名称四</p>
          </li>
          <li>
            <img src="./img/1-1Q109112045A2.jpg" alt="">
            <p>产品名称五</p>
          </li>
          <li>
            <img src="./img/1-1Q109111IWL.jpg" alt="">
            <p>产品名称六</p>
          </li>
        </ul>
        <ul id="d3">
          <li>
            <img src="./img/1-1Q1091423570-L.jpg" alt="">
            <p>产品名称三</p>
          </li>
          <li>
            <img src="./img/1-1Q1091424360-L.jpg" alt="">
            <p>产品名称二</p>
          </li>
          <li>
            <img src="./img/1-1Q1091425310-L.jpg" alt="">
            <p>产品名称三</p>
          </li>
          <li>
            <img src="./img/1-1Q109111AO26.jpg" alt="">
            <p>产品名称四</p>
          </li>
          <li>
            <img src="./img/1-1Q109112045A2.jpg" alt="">
            <p>产品名称五</p>
          </li>
          <li>
            <img src="./img/1-1Q109111IWL.jpg" alt="">
            <p>产品名称六</p>
          </li>
        </ul>
        <ul id="d4">
          <li>
            <img src="./img/1-1Q1091423570-L.jpg" alt="">
            <p>产品名称四</p>
          </li>
          <li>
            <img src="./img/1-1Q1091424360-L.jpg" alt="">
            <p>产品名称二</p>
          </li>
          <li>
            <img src="./img/1-1Q1091425310-L.jpg" alt="">
            <p>产品名称三</p>
          </li>
          <li>
            <img src="./img/1-1Q109111AO26.jpg" alt="">
            <p>产品名称四</p>
          </li>
          <li>
            <img src="./img/1-1Q109112045A2.jpg" alt="">
            <p>产品名称五</p>
          </li>
          <li>
            <img src="./img/1-1Q109111IWL.jpg" alt="">
            <p>产品名称六</p>
          </li>
        </ul>
        <ul id="d5">
          <li>
            <img src="./img/1-1Q1091423570-L.jpg" alt="">
            <p>产品名称五</p>
          </li>
          <li>
            <img src="./img/1-1Q1091424360-L.jpg" alt="">
            <p>产品名称二</p>
          </li>
          <li>
            <img src="./img/1-1Q1091425310-L.jpg" alt="">
            <p>产品名称三</p>
          </li>
          <li>
            <img src="./img/1-1Q109111AO26.jpg" alt="">
            <p>产品名称四</p>
          </li>
          <li>
            <img src="./img/1-1Q109112045A2.jpg" alt="">
            <p>产品名称五</p>
          </li>
          <li>
            <img src="./img/1-1Q109111IWL.jpg" alt="">
            <p>产品名称六</p>
          </li>
        </ul>
      </div>
    </div>
  </div>
  <!-- 第四部分关于公司介绍 -->
  <div class="about-box">
    <div class="about-title">
      <h2> 关于我们</h2>
      <h3> ABOUT US</h3>
    </div>
    <div class="about-left">
      <div class="about-img"> <img src="img/1-1Q109101449206.png"> </div>
    </div>
    <div class="about-right">
      <div style="height: 130px; overflow: hidden;">
        <h4>我的网站</h4>
        <p> 核心价值观：诚信、创新、服务
          企业核心： 诚信
          企业精神： 团结拼搏、开拓求实、满足用户、科技进步。
          客户：为客户提供高质量和最大价值的专业化产品和服务 ... </p>
      </div>
      <a href="#">查看更多详情</a>
    </div>
  </div>
  <!-- 第五部分案例展示 -->

  <div class="case-bg center">
    <div class="case-box">
      <div class="titlie">
        <h2> 案例展示</h2>
        <h3> CASE</h3>
      </div>
      <div class="case-list">
        <ul class="roll__list">
          <li><a href="#">
              <div class="case-img"> <img src="img/1-1P41916011U45.jpg"> </div>
              <p> 案例展示四</p>
            </a></li>
          <li><a href="#">
              <div class="case-img"> <img src="img/1-1P41916004Q42.jpg"> </div>
              <p> 案例展示三</p>
            </a></li>
          <li><a href="#">
              <div class="case-img"> <img src="img/1-1P419160024593.jpg"> </div>
              <p> 案例展示二</p>
            </a></li>
          <li><a href="#">
              <div class="case-img"> <img src="img/1-1P419155954c4.jpg"> </div>
              <p> 案例展示一</p>
            </a></li>
        </ul>
      </div>
    </div>
  </div>
  <!-- 第六部分新闻资讯 -->
  <div class="news-box center">
    <div class="titlie">
      <h2> 新闻资讯</h2>
      <h3> NEWS</h3>
    </div>
    <div class="news-left">
      <div class="news-img"> <img src="img/1-1Q109102144439.png" /> </div>
      <ul class="news-list">
        <li><a href="#">
            <div class="news-sj"> <span> 04-24</span> <b> 2018</b> </div>
            <div class="news-nr">
              <h2> 上海市城市总体规划 生态环境为城市发展的红/底线</h2>
              <p> 上海市政府4日正式公布《上海市城市总体规划（2017-2035年）》（以下简称“规划”）全文。全文明确，上海的城市性质确定为长江三角洲世...</p>
            </div>
          </a></li>
      </ul>
    </div>
    <div class="news-right">
      <ul class="news-list">
        <li><a href="#">
            <div class="news-sj"> <span> 04-24</span> <b> 2018</b> </div>
            <div class="news-nr">
              <h2> 上海市城市总体规划 生态环境为城市发展的红/底线</h2>
              <p> 上海市政府4日正式公布《上海市城市总体规划（2017-2035年）》（以下简称“规划”）全文。全文明确，上海的城市性质确定为长江三角洲世...</p>
            </div>
          </a></li>
        <li><a href="#">
            <div class="news-sj"> <span> 04-24</span> <b> 2018</b> </div>
            <div class="news-nr">
              <h2> 2017年 泉州完成道路绿化改造超50万平方米</h2>
              <p> 泉州这座城市越来越美了。作为城市的骨架，道路是城市变化最直接的表现。从路畅景美的进城大道，到绿意盎然的滨海街景，再到蜿蜒奇...</p>
            </div>
          </a></li>
        <li><a href="#">
            <div class="news-sj"> <span> 04-24</span> <b> 2018</b> </div>
            <div class="news-nr">
              <h2> 昆明：盘龙江畔点亮“蓝孔雀”景观灯</h2>
              <p> 记者经过昆明市盘龙江时看到，有工人正在为盘龙江沿线安装新的景观灯，景观灯的底座被“蓝孔雀羽毛”围绕。据悉，这些“蓝孔雀”灯...</p>
            </div>
          </a></li>
      </ul>
    </div>
    <!-- 清除父级浮动 -->
    <div class="clear"> </div>
  </div>
  <!--底部-->

  <div class="foot-bg">
    <div class="foot-box">
      <div class="foot-left">
        <ul class="foot-nva">
          <li><a href="#">网站首页</a></li>
          <li> <a href="#">关于我们</a> </li>
          <li> <a href="#">产品中心</a> </li>
          <li> <a href="#">新闻资讯</a> </li>
          <li> <a href="#">案例展示</a> </li>
          <li> <a href="#">联系我们</a> </li>
          <li> <a href="#">人才招聘</a> </li>
          <div class="clear"></div>
        </ul>
        <dl class="foot-lx">
          <dd>电话：123456789</dd>
          <dd>手机：123456789</dd>
          <dd>电子邮箱：123456789@163.com</dd>
        </dl>
        <dl class="foot-lx">
          <dd>公司：我的网站</dd>
          <dd>地址：这里是您的公司地址</dd>
        </dl>
        <dl class="foot-lx">
          <dd>备案号：123456789</dd>
        </dl>
      </div>

      <p>关注我们</p>
    </div>
    <div class="clear"></div>
  </div>
  </div>

  <script>
    const dox = document.querySelectorAll('.d>ul:first-child>li')
    console.log(dox);
    dox.forEach(d => {
      d.onmouseenter = function () {
        console.log(d);
        document.querySelector('.d .cur').classList.remove('cur')
        this.classList.add('cur')
        document.querySelector('.dox .show').classList.remove('show')
        console.log(this.dataset.id);
        const {
          id
        } = this.dataset
        document.getElementById(id).classList.add('show')
      }
      console.log(d);
    })
  </script>
</body>

</html>